<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('项目名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('负责人')" prop="nickName">
        <el-input
          v-model="queryParams.personChargeName"
          :placeholder="$t('负责人')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('合同名称')" prop="name">
        <el-input
          v-model="queryParams.name"
          :placeholder="$t('合同名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('合同类型')" prop="type">
        <el-select v-model="queryParams.type" :placeholder="$t('请选择')" filterable clearable>
          <el-option
            v-for="dict in getTypeDict"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        <el-button
          v-hasPermi="['deal:contractcontrolpanel:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="ccpLoading" :data="dealContractPlanList" :span-method="objectSpanMethod" border class="noneHoverBg">
      <el-table-column :label="$t('项目名称')" align="center" prop="dealName" :show-overflow-tooltip="true" fixed="left" min-width="200">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId, companyId: scope.row.companyId }}"
            class="link_a"
          >{{ scope.row.dealName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('合同名称')" align="center" prop="name" min-width="130" fixed="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link type="primary" @click="viewDealInfo(scope.row)">{{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('关键条款')" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="viewDealTerms(scope.row)">{{ $t('详情') }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('负责人')" align="center" prop="personChargeName" min-width="120" show-overflow-tooltip />
      <el-table-column :label="$t('合同类型')" align="center" prop="type" min-width="120" :formatter="typeFormat" :show-overflow-tooltip="true" />
      <el-table-column :label="$t('合同签约时间')" align="center" prop="applyTime" min-width="120">
        <template slot-scope="scope">
          {{ parseTime(scope.row.applyTime) }}
        </template>
      </el-table-column>
      <el-table-column v-if="queryParams.contractType === 'debt'" :label="$t('年后利率(%)')" align="center" prop="interestRateAfterYear" min-width="140">
        <template slot-scope="scope">
          {{ moneyFormat(scope.row.interestRateAfterYear, '') }}
        </template>
      </el-table-column>
      <el-table-column v-if="queryParams.contractType === 'debt'" :label="$t('起息日')" align="center" prop="valueDate" min-width="140">
        <template slot-scope="scope">
          {{ formatDates(scope.row.valueDate) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('协议金额') + $t('金额单位')" align="center" prop="money" min-width="120">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.money, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已划款金额') + $t('金额单位')" align="center" prop="total" min-width="140">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.total, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('币种')" align="center" prop="currency" min-width="90" :formatter="currencyFormat" :show-overflow-tooltip="true" />
      <el-table-column :label="$t('签约主体')" align="center" prop="investMain" min-width="250" class-name="dealContractPlan">
        <template slot-scope="scope">
          <div
            v-show="scope.row.dealContractPaymentList && scope.row.dealContractPaymentList.length > 0"
            class="plan"
          >
            <div v-for="(value,index) in scope.row.dealContractPaymentList" :key="index">
              {{ mainBodyTypeDictFormat(value) }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('首次划款时间')" align="center" prop="timeOfFirstTransfer" min-width="180px" class-name="dealContractPlan">
        <template slot-scope="scope">
          <div
            v-show="scope.row.dealContractPaymentList && scope.row.dealContractPaymentList.length > 0"
            class="plan"
          >
            <div v-for="(value,index) in scope.row.dealContractPaymentList" :key="index">
              {{ thatFormatDates(value) }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="queryParams.contractType === 'equity'"
        :label="$t('持股数量(万股)')"
        align="center"
        prop="numberOfShares"
        min-width="140"
        class-name="dealContractPlan"
      >
        <template slot-scope="scope">
          <div
            v-show="scope.row.dealContractPaymentList && scope.row.dealContractPaymentList.length > 0"
            class="plan"
          >
            <div v-for="(value,index) in scope.row.dealContractPaymentList" :key="index">
              {{ moneyFormat(value.numberOfShares, 'w') }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="queryParams.contractType === 'equity' || queryParams.contractType === 'bf'"
        :label="queryParams.contractType === 'equity' ? $t('持股比例(%)') : $t('认缴比例(%)')"
        align="center"
        prop="stake"
        min-width="140"
        class-name="dealContractPlan"
      >
        <template slot-scope="scope">
          <div
            v-show="scope.row.dealContractPaymentList && scope.row.dealContractPaymentList.length > 0"
            class="plan"
          >
            <div
              v-for="(value,index) in scope.row.dealContractPaymentList"
              :key="index"
            >
              {{ value.stake }}
            </div>
          </div>
        </template>
      </el-table-column>
      <!--
      <el-table-column :label="$t('协议付款时间')" align="center" prop="paymentTime" min-width="140" class-name="dealContractPlan">
        <template slot-scope="scope">
          <div
            v-for="(value,index) in scope.row.dealContractPaymentList"
            v-show="scope.row.dealContractPaymentList && scope.row.dealContractPaymentList.length > 0"
            :key="index"
            class="tableWhite"
          >
            <div v-for="(value2,index2) in (value == null ? [] : value.dealContractPlanList)" :key="index2">
              {{ formatDates(value2.paymentTime) }}
            </div>
          </div>
        </template>
      </el-table-column>
      -->
      <el-table-column :label="$t('协议付款金额') + $t('金额单位')" align="center" prop="" min-width="140" class-name="dealContractPlan">
        <template slot-scope="scope">
          <div
            v-for="(value,index) in scope.row.dealContractPaymentList"
            v-show="scope.row.dealContractPaymentList && scope.row.dealContractPaymentList.length > 0"
            :key="index"
            class="tableWhite"
          >
            <div v-for="(value2,index2) in (value == null ? [] : value.dealContractPlanList)" :key="index2">
              <span class="money-text">{{ moneyFormat(value2.paymentMoney, 'w') }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="infoOpen" title="流程详情" custom-class="dialogForm" style=" text-align: left;" :close-on-click-modal="false" :lock-scroll="false">
      <ProcessInfoForm ref="processInfoForm" />
    </el-dialog>

    <el-dialog :visible.sync="dealTermsOpen" :close-on-click-modal="false" custom-class="folderOpen" :lock-scroll="false" append-to-body>
      <dealTermsList ref="dealTermsList" />
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listContractControlPanel, findListView } from '@/api/deal/contractControlPanel/contractControlPanel'
import ProcessInfoForm from '@/views/act/process/processInfoForm'
import dealTermsList from '@/views/deal/terms/dealTermsList.vue'
export default {
  components: {
    ProcessInfoForm,
    dealTermsList
  },
  data() {
    return {
      // 遮罩层
      ccpLoading: true,
      infoOpen: false,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 查询参数
      queryParams: {
        contractType: undefined,
        dealName: undefined,
        personChargeName: undefined,
        name: undefined,
        type: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      dealContractPlanList: [],
      // 币种字典
      currencyOptions: [],
      // 合同类型
      getTypeDict: [],
      // 主体类型
      mainBodyTypeDict: [],
      // 关键条款弹窗
      dealTermsOpen: false
    }
  },
  computed: {
    style() {
      return function(value) {
        if (value !== undefined && value !== null) {
          var num = value.dealContractPlanList.length
          if (num > 0) {
            return { 'height': 36 * num + 'px', 'line-height': 36 * num + 'px' }
          } else {
            return { 'height': '36px', 'line-height': '36px' }
          }
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  created() {
    // 付款币种
    this.getDicts('currency').then(response => {
      this.currencyOptions = response.data
    })
    // 合同类型
    this.getDicts('deal_contract_type_select').then(res => {
      this.getTypeDict = res.data
      if (this.getTypeDict === undefined || this.getTypeDict === null) {
        this.getTypeDict = []
      }
      this.getDicts('deal_contract_bond_equity').then(response => {
        response.data.forEach(item => {
          this.getTypeDict.push(item)
        })
      })
    })
    // 主体类型
    findListView().then(response => {
      this.mainBodyTypeDict = response.data
    })
  },
  methods: {
    getList() {
      this.ccpLoading = true
      this.queryParams.contractType = undefined
      if (this.$route.params.panelType) {
        this.queryParams.contractType = this.$route.params.panelType
      }
      listContractControlPanel(this.queryParams).then(response => {
        this.dealContractPlanList = response.rows
        this.total = response.total
        this.ccpLoading = false
      })
    },
    // 表单重置
    reset() {
      this.form = {
        dealName: undefined,
        personCharge: undefined,
        personChargeName: undefined,
        name: undefined,
        payCompletionTime: undefined,
        total: undefined,
        remark: undefined,
        dealContractInvestList: [],
        updateBy: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.name = ''
      this.queryParams.personChargeName = ''
      this.queryParams.dealName = ''
      this.queryParams.type = ''
      this.queryHandle()
    },
    currencyFormat(row) {
      return this.selectDictLabel(this.currencyOptions, row.currency)
    },
    typeFormat(row) {
      return this.selectDictLabel(this.getTypeDict, row.type)
    },
    thatFormatDates(value) {
      if (value != null) {
        return this.formatDates(value.timeOfFirstTransfer)
      }
      return ''
    },
    mainBodyTypeDictFormat(value) {
      var result = ''
      if (value !== null) {
        this.mainBodyTypeDict.some(item => {
          if (value.investMain === item.id) {
            result = item.relationName
            return false
          }
        })
      }
      return result
    },
    // 查看合同项目请
    viewDealInfo(data) {
      let actId = ''
      let flag = false
      try {
        actId = data.actId
        if (actId !== null && actId !== undefined && actId !== '') {
          flag = true
        }
      } catch (e) {
        this.$message.error('未找到该流程,无法查看')
      }
      if (flag) {
        this.infoOpen = true
        this.title = '合同信息'
        this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          var proData = {}
          proData.actId = actId
          this.$refs.processInfoForm.init(proData)
        })
      } else {
        this.$message.error('未找到该流程,无法查看')
      }
    },
    exportHandle() {
      this.$confirm('确定导出Excel吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.downLoadExcel('/deal/ContractControlPanel/exportContract', this.queryParams)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出'
        })
      })
    },
    objectSpanMethod() {
    },
    formatDates(val) {
      if (val !== '' && val !== undefined && val !== null && val.length > 10) {
        return val.substring(0, 10)
      }
      return val
    },
    // 查看关键条款
    viewDealTerms(row) {
      console.log(row)
      this.dealTermsOpen = true
      this.$nextTick(() => {
        this.$refs.dealTermsList.queryParams.parentAndContractId = row.id
        this.$refs.dealTermsList.queryParams.dealId = row.dealId
        this.$refs.dealTermsList.disableActionButtons()
        this.$refs.dealTermsList.getList()
      })
    }

  }
}
</script>
